<template>
	<view class="content">
		<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
	</view>
</template>

<script>
	const img = 'https://taxi.raxan.xyz/wechat/static/images/md_pin_drop.png'; //图标地址
	export default {
		data() {
			return {
				latitude: 23.099994,//默认 中心经度
				longitude: 113.324520,//默认 中心纬度
				title:'',
				positions:[],
			}
		},
		onReady() {
			this._mapContext = uni.createMapContext("map", this);
			// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
					
				}
			});
			this._mapContext.on("markerClusterCreate", (e) => {
				
			});
			this.positions = [{
				latitude: this.latitude,
				longitude: this.longitude,
			}];
			this.addMarkers();
		},
		onLoad(option){
			this.title = option.poiaddress;
			this.latitude = option.latitude;
			this.longitude = option.longitude;
		},
		methods: {
			addMarkers() {
				let that = this;
				const positions = this.positions;
				const markers = []
				positions.forEach((p, i) => {
					markers.push(
						Object.assign({},{
							id: i + 1,  
							iconPath: img,  
							width: 50,  
							height: 50,  
							joinCluster: true, // 指定了该参数才会参与聚合
						},p)
					)
				})
				that._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		flex: 1;
	}

	.map {
		flex: 1;
		height: 100vh;
		width: 100%;
	}
</style>